import React, { Component } from 'react'
// import './App.css'
import './App.scss'
import style from './App.module.scss'
import classnames from 'classnames'

export default class App extends Component {
  state = {
    objStyle: { color: 'red', fontSize: '50px' },
    isShow: true
  }
  render() {
    return (
      <div>
        <h1 style={this.state.objStyle}>1. style方式设置样式</h1>
        <h1 className="color bg active">2. className方式设置样式</h1>
        <h1 className="color bg active">3. sass方式设置样式</h1>
        <h1 className={style.color}>4. 样式模块化</h1>
        <h1 className={classnames('color', 'bg', 'active')}>5. classnames</h1>
        <h1 className={classnames(['color', 'bg', 'active'])}>5. classnames</h1>
        <h1
          className={classnames([
            'color',
            'bg',
            this.state.isShow ? 'active' : ''
          ])}
        >
          5. classnames
        </h1>
        <h1
          className={classnames(['color', 'bg', { active: this.state.isShow }])}
        >
          5. classnames
        </h1>
        <h1 className={classnames({ color: true, bg: true, active: true })}>
          5. classnames
        </h1>
      </div>
    )
  }
}
